<template>
    <div>
        <nut-form>
            <nut-form-item label="尺寸(长x宽)">
                <input class="nut-input-text" placeholder="请输入尺寸" type="text" />
            </nut-form-item>
            <nut-form-item label="颜色">
                <div class="weui-input" style="color: black;" @click="state.visible = true">{{ getColorText }}</div>
            </nut-form-item>
        </nut-form>
        <nut-popup v-model:visible="state.visible" position="bottom">
            <nut-picker
                :columns="colorColumns"
                title="颜色选择"
                @close="state.visible = false"
                @confirm="addConfirm"
            />
        </nut-popup>

    </div>
</template>

<script lang="ts">
export default { name: 'WareInfo' }
</script>

<script lang="ts" setup>
import { getCurrentInstance, ComponentInternalInstance, reactive, computed, ref, nextTick, onMounted, useAttrs, useSlots } from 'vue'

// const slots = useSlots()
// const attrs = useAttrs()
// const emits = defineEmits()
const { proxy }:any = getCurrentInstance() as ComponentInternalInstance

const colorColumns = [
    { text: '绿色', value: 'green' },
    { text: '白色', value: 'white' },
]

const getColorText = computed(() => colorColumns.find(item => item.value === state.form.add)?.text ?? '')

const state = reactive({
    visible: false,
    form: {
        add: ''
    }
})

const addConfirm = ({selectedOptions, selectedValue}) => {
    state.form.add = selectedValue[0]
    state.visible = false
    console.log(state.form.add)

}

// defineExpose({

// })
</script>
<style lang="scss" scoped>

</style>